<template>
    <div class="all">
      <div class="userInfo">
        <!-- <div class="return" @click="goManage('/home')">
        <img src="../../assets/back.png" alt="">
        返回
        </div> -->

      <div class="info">
        <div class="header inf">
            <img :src="userData.headshot?imgUrl(userData.headshot):require('../../assets/user/user.png')" alt="">
            <input type="file" title="" @change="submitheader($event)">
        </div>
        <div class="name inf">账号：{{userData.name}}</div>
        <div class="cate inf">权限：{{userData.cate_name}}</div>
        <div class="pwd inf" @click="modifyPwd()">修改密码</div>
      </div>
      </div>

      <el-dialog
      title="修改密码"
      :visible.sync="dialogVisiblePassword"
      width="30%"
      :close-on-click-modal="false"
      :before-close="handleClosePassword"
    >
      <div class="content">
        <!-- <div class="active">
          <div id="acteve">忘记密码</div>
        </div> -->

        <el-form
          ref="passForm"
          

          class="login-form"
          auto-complete="on"
          label-position="left"
        >
          
        <el-form-item prop="firstPassword">
            <div class="show_eye">
              <el-input
                ref="password0"
                v-model="pwd.password0"
                type="password"
                placeholder="请输入旧密码"
              />
            </div>
          </el-form-item>
              

          <el-form-item prop="firstPassword">
            <div class="show_eye">
              <el-input
                ref="password1"
                v-model="pwd.password1"
                type="password"
                placeholder="请输入新密码"
              />
            </div>
          </el-form-item>
              

          <el-form-item prop="secondPassword">
            <div class="show_eye">
              <el-input
                ref="password2"
                v-model="pwd.password2"
                type="password"
                placeholder="请再次输入新密码"
              />
              
            </div>
          </el-form-item>
        </el-form>
      </div>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <div class="footer_button">
          <el-button
            type="info"
            plain
            @click="handleClosePassword($event)"
          >取消</el-button>
          <el-button
            type="primary"
            @click="submitDataPwd($event)"
          >确定</el-button>
        </div>
      </span>
    </el-dialog>
    </div>
  </template>
  
  <script>
  import {UserInfo} from "@/api/dataReq"
  import { req } from '@/api/basicReq'
  import {setDataAes, getDataAes} from '@/webencrypt/index'
  export default {
    name: 'userInfo',
    props: {
    
    },
    data(){
        return{
            dialogVisiblePassword: false,
            userData:{},
            pwd:{},
            password0: '',
            password1: '',
            password2: '',
        }
    },
    created(){
      this.getUserInfo()
      
      
    },

    methods:{

      getUserInfo(){
        
        var reqData  ={}
        UserInfo(reqData).then(response => {
          if (response.code == '1') {
            // console.log(response)
           this.userData = this.parseData(response.data[0])

          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
      },
      parseData(data){

        switch (data.cate) {
        case 0:
            data.cate_name = '普通用户'
            break
        case 1:
            data.cate_name = '商家'
            break
        }
            
        return data
      },
      imgUrl(imgPath){
        return cfg.img_url+imgPath+ '?' + Date.now()
        
    },
    goManage(path){
        if(path){
            this.$router.push({ path: path})
        }
    
    },
    modifyPwd(){
        this.dialogVisiblePassword = true
    },
    handleClosePassword(){
        this.dialogVisiblePassword = false

        this.pwd={}
    },
    submitDataPwd(){
      if(this.pwd.password0&&this.pwd.password1&&this.pwd.password2){
        if(this.pwd.password1!=this.pwd.password2){
          this.$message.warning('两次密码不一致')
        }
        else{
          var data = this.pwd
          var secret = cfg.secret
          var jsondata = JSON.stringify(data)
          // console.log(jsondata)
          var encData = setDataAes(secret, jsondata)
          
          var bodyData = {
            'data': encData
          }
          var reqData = {
            url: 'user/UserInfo',
            method: 'post',
            data: bodyData
          }
          req(reqData).then(response => {
          if (response.code == '1') {
            this.$message.success('修改成功')
            this.dialogVisiblePassword = false
            this.pwd={}

          } else {
            this.$message.error(response.msg)
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
        }

            }else{
              this.$message.warning('请输入密码')
        }

    },
    submitheader(e){
      var headhost = e.target.files[0]
      var formData = new FormData()
      formData.append('headhost', headhost)
      var reqData = {
            url: 'user/UserInfo',
            method: 'put',
            data: formData
          }
      req(reqData).then(response => {
          if (response.code == '1') {
            this.$message.success('修改成功')
            this.getUserInfo()

          } else {
            this.$message.error('修改失败')
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })
    },

    }
    
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
  @import '~@/style/minxin.scss';


  .all{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    .userInfo{
    // position:absolute;
    width: 800px;
    height: 600px;
    background-color: #fff;
    border-radius: 20px;
    // margin-top: 80px;
    
    .return {
    //   position: absolute;
    display: flex;
    justify-content: start;

      margin-top: 20px;
      margin-left: 20px;
     
      cursor: pointer;
      img {
        margin-right: 5px;
      }
    }

    .info{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 500px;
        margin: auto;
        // border: 1px solid red;

        .header{
            position: relative;
            cursor: pointer;
            img{
                width: 80px;
                height: 80px;
                border-radius: 80px;
            }
            input{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              cursor: pointer;
            }
        }
        .name{
            font-size: 20px;
            font-weight: 800;
        }
        .cate{
            font-size: 15px;
        }
        .pwd{
            color: cornflowerblue;
            cursor: pointer;
        }
        .inf{
            margin-top: 50px;
        }
    }
  
  }

  }

  </style>
  